﻿@model HomeViewModel
@{
    ViewBag.Title = "The Indonesia's Global Reputation";
}
@section _DivScroll {
}
<h1>Welcome to the Indonesia’s Global Reputation System</h1>
<div class="div-chart-region-big">
    <div class="div-chart-region">
        @(Html.Telerik().Chart(Model.ListChartDataRegion)
            .Name("ListChartDataRegionBig")
            .DataBinding(dataBinding => dataBinding.Ajax().Select("_BuildChartRegion", "Home", new { regionID = 0 }))
            .Title(title => title
            .Text("Indonesia Reputation news chart")
            .Visible(false))
            .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
            .Visible(true))
            .Series(series =>
            {
            series.Line("Totals").Color("#F6921E").Axis("news").Name("Total News").Tooltip(tooltip => tooltip.Format("News: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Circle));
            series.Line("AverageMark").Color("#83ABC0").Axis("mark").Name("Average Mark").Tooltip(tooltip => tooltip.Format("Mark: {0:N0}"));
            series.Line("MediaCount").Color("#BB252A").Axis("mediacount").Name("Total Media").Tooltip(tooltip => tooltip.Format("Media: {0:N0}"));    
            })
            .CategoryAxis(axis => axis.Categories(s => s.DateString).AxisCrossingValue(0, 100))
            .ValueAxis(axis => axis.Numeric("mark").Labels(labels => labels.Format("{0:#,##0}")).Color("#83ABC0").Min(0).Max(10).MajorUnit(1))
            .ValueAxis(axis => axis.Numeric("news").Labels(labels => labels.Format("{0:#,##0}")).Color("#F6921E"))
            .ValueAxis(axis => axis.Numeric("mediacount").Labels(labels => labels.Format("{0:#,##0}")).Color("#BB252A"))
            //.Min(0).Max(10).MajorUnit(1))            
            .Tooltip(tooltip => tooltip.Visible(true))
            .HtmlAttributes(new { @class = "chart-total-big" })
            .ClientEvents(events => events.OnLoad("onLoad").OnDataBound("onDataBound"))
        )
    </div>
    <div class="div-data-region">
        <div class="moduletable">
            <h3>Static</h3>
            <div class="content">
                <table class="table-data">
                    <tr>
                        <td>Total media monitored</td>
                        <td>
                            <span>1300</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Total news</td>
                        <td>
                            <span>1250</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Good news</td>
                        <td>
                            <span>1000</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Bad news</td>
                        <td>
                            <span>250</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Average score</td>
                        <td>
                            <span>7.2</span>
                        </td>
                    </tr>                    
                    <tr>
                        <td>Register users</td>
                        <td>
                            <span>130</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>    
</div>
<div class="clearfix"></div>
<div class="list_carousel">
    <ul id="foo2">
        <li>
            <a onclick="btnChangeChartRegion(0)">
                <div title="News in the Global">                
                    @(Html.Telerik().Chart(Model.ListChartData)
                        .Name("ListChartDataRegion")
                        .DataBinding(dataBinding => dataBinding.Ajax().Select("_BuildChartRegion", "Home", new {regionID = 0}))
                        .Title(title => title.Text("Indonesia Reputation news chart in the world").Visible(false))
                        .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(false))
                        .Series(series =>
                        {
                            series.Line("Totals").Color("#F6921E").Axis("news").Name("Total News").Tooltip(tooltip => tooltip.Format("News: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Triangle).Visible(false));
                            series.Line("AverageMark").Color("#83ABC0").Axis("mark").Name("Average Mark").Tooltip(tooltip => tooltip.Format("Mark: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Triangle).Visible(false));
                            series.Line("MediaCount").Color("#BB252A").Axis("mediacount").Name("Total Media").Tooltip(tooltip => tooltip.Format("Media: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Triangle).Visible(false));
                        })
                        .CategoryAxis(axis => axis.Categories(s => s.DateString).AxisCrossingValue(0, 100).Labels(x=>x.Visible(false)))
                        .ValueAxis(axis => axis.Numeric("mark").Labels(labels => labels.Format("{0:#,##0}").Visible(false)).Color("#83ABC0").Min(0).Max(10).MajorUnit(1))
                        .ValueAxis(axis => axis.Numeric("news").Labels(labels => labels.Format("{0:#,##0}").Visible(false)).Color("#F6921E"))
                        .ValueAxis(axis => axis.Numeric("mediacount").Labels(labels => labels.Format("{0:#,##0}").Visible(false)).Color("#BB252A"))
                        .Tooltip(tooltip => tooltip.Visible(false))
                        .HtmlAttributes(new { @class = "chart-region-small" })
                                .ClientEvents(events => events.OnLoad("onLoadSmallGlobal").OnDataBound("onDataBoundSmallGlobal"))
                        )
                    <span>                        
                        <img src="/Content/images/small-facebook.gif" alt="Indorepuation" class="img-small-facebook" style="display:  none;" />
                        Global
                    </span>
                </div>
             </a>
        </li>
        @foreach(var item in Model.ListRegionParent)
        {
            <li>
                <a onclick="btnChangeChartRegion(@item.ID)">                    
                    @{
                        var item1 = item;
                    }
                    @(Html.Telerik().Chart(Model.ListChartData)
                            .Name("ListChartDataRegioni")
                            .DataBinding(dataBinding => dataBinding.Ajax().Select("_BuildChartRegion", "Home", new { regionID = item1.ID}))
                            .Title(title => title.Text("Indonesia Reputation news chart in the world").Visible(false))
                            .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(false))
                            .Series(series =>
                            {
                                series.Line("Totals").Color("#F6921E").Axis("news").Name("Total News").Tooltip(tooltip => tooltip.Format("News: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Triangle).Visible(false));
                                series.Line("AverageMark").Color("#83ABC0").Axis("mark").Name("Average Mark").Tooltip(tooltip => tooltip.Format("Mark: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Triangle).Visible(false));
                                series.Line("MediaCount").Color("#BB252A").Axis("mediacount").Name("Total Media").Tooltip(tooltip => tooltip.Format("Media: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Triangle).Visible(false));
                            })
                            .CategoryAxis(axis => axis.Categories(s => s.DateString).AxisCrossingValue(0, 100).Labels(x=>x.Visible(false)))
                            .ValueAxis(axis => axis.Numeric("mark").Labels(labels => labels.Format("{0:#,##0}").Visible(false)).Color("#83ABC0").Min(0).Max(10).MajorUnit(1))
                            .ValueAxis(axis => axis.Numeric("news").Labels(labels => labels.Format("{0:#,##0}").Visible(false)).Color("#F6921E"))
                        .ValueAxis(axis => axis.Numeric("mediacount").Labels(labels => labels.Format("{0:#,##0}").Visible(false)).Color("#BB252A"))
                            .Tooltip(tooltip => tooltip.Visible(false))
                            .HtmlAttributes(new { @class = "chart-region-small", @id = "ListChartDataRegion" + item.ID })
                    .ClientEvents(events => events.OnLoad("onLoadSmallGlobal").OnDataBound("onDataBoundSmallGlobal"))
                    )
                    <span>
                        <img src="/Content/images/small-facebook.gif" alt="Indorepuation" class="img-small-facebook" style="display:  none;" />
                        @item.Name
                    </span>
                </a>
            </li>
        }        
    </ul>
    <div class="clearfix">
    </div>
    <a id="prev2" class="prev" href="#">«</a> <a id="next2" class="next" href="#">»</a>
    <div id="pager2" class="pager">
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //	Scrolled by user interaction
        $('#foo2').carouFredSel({
            prev: '#prev2',
            next: '#next2',
            pagination: "#pager2",
            auto: false
            , direction: "left"
        });

    });
    function getChartDataRegionBig() {
        return $("#ListChartDataRegionBig").data("tChart");
    }
    function btnChangeChartRegion(regionId) {        
        $("#LoadingImage").show();
        getChartDataRegionBig().rebind({
            regionID: regionId
        });
        $("#LoadingImage").hide();
    }
    function onLoad(e) {
        // The chart is now initialized
        $("#LoadingImage").show();
    }
    function onDataBound(e) {
        // Series data is now available
        $("#LoadingImage").hide();
    }
    function onLoadSmallGlobal(e) {             
        $("#" + e.currentTarget.id).parent().find('.img-small-facebook').show();
    }
    function onDataBoundSmallGlobal(e) {          
        $("#" + this.element.context.id).parent().find('.img-small-facebook').hide();
    }
</script>
